<!--主页部分-->
<template>
  <div class="home">
    <div class="header">
      <div class="address">
        <van-icon name="location-o" />
        <span>云南大学呈贡校区</span>
        <van-icon name="arrow-down" />
      </div>
      <div class="top">
        <div class="search" @click="$router.push('/search')">
          <input type="text" placeholder="请输入关键字" readonly/>
          <span>搜索</span>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="item" @click="$router.push('/food')" v-for="(item, index) in list" :key="index">
        <div class="item_image"></div>
        <span>{{item.name}}</span>
      </div>
    </div>
    <div class="start_list">
      <div class="item">
        <div class="item_title">
          美团优选
          <span class="subtitle">明日达超市</span>
        </div>
        <div class="item_list">
          <div class="item_list_item" v-for="(item, index) in 1" :key="index">
            <img src="../assets/mtyx01.jpg" alt="">
            <p>
              <span>￥6.99</span>
              <span>秒杀</span>
            </p>
          </div>
          <div class="item_list_item" v-for="(item, index) in 1" :key="index">
            <img src="../assets/mtyx02.jpg" alt="">
            <p>
              <span>￥15.99</span>
              <span>秒杀</span>
            </p>
          </div>
        </div>
      </div>
      <div class="item" @click="$router.push('/detail')">
        <div class="item_title">
          特价团
          <span class="subtitle">爆款热抢中</span>
        </div>
        <div class="item_image">
          <img src="../assets/rxkf.jpg" alt="">
        </div>
        <div class="item_title">瑞幸咖啡 凯旋麦麦美式</div>
        <div class="item_line">
          <span>￥9.9</span>
          <span>￥32</span>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="item" v-for="(item, index) in 1" :key="index" @click="$router.push('/detail')">
        <img src="../assets/mxbc.png" alt/>
        <div class="box">
          <div class="title">蜜雪冰城</div>
          <div class="core">
            <span>4.8分</span>
            <span>月销2000+</span>
          </div>
          <div class="tags">
            <div class="span">25减3</div>
            <div class="span">9.17折起</div>
            <div class="span">50减12</div>
          </div>
        </div>
      </div>
      <div class="item" v-for="(item, index) in 1" :key="index" @click="$router.push('/detail')">
        <img src="../assets/hbw.jpg" alt/>
        <div class="box">
          <div class="title">汉堡王（云南大学呈贡校区店）</div>
          <div class="core">
            <span>小吃快餐</span>
            <span>季售50+</span>
          </div>
          <div class="tags">
            <div class="span">3.8元团购华夫筒</div>
          </div>
        </div>
      </div>
      <div class="item" v-for="(item, index) in 1" :key="index" @click="$router.push('/detail')">
        <img src="../assets/yykc.jpg" alt/>
        <div class="box">
          <div class="title">丫丫火锅掌中宝串串(仕林街店)</div>
          <div class="core">
            <span>4.8分</span>
            <span>季售2000+</span>
          </div>
          <div class="tags">
            <div class="span">16代20元</div>
          </div>
        </div>
      </div>
      <div class="item" v-for="(item, index) in 1" :key="index" @click="$router.push('/detail')">
        <img src="../assets/rxb.jpg" alt/>
        <div class="box">
          <div class="title">权小盛肉蟹煲</div>
          <div class="core">
            <span>93%好评</span>
            <span>半年售700+</span>
          </div>
          <div class="tags">
            <div class="span">87.9</div>
            <div class="span">特价团</div>
          </div>
        </div>
      </div>
      <div class="item" v-for="(item, index) in 1" :key="index" @click="$router.push('/detail')">
        <img src="../assets/mcrl.jpg" alt/>
        <div class="box">
          <div class="title">茉莉抹茶软酪</div>
          <div class="core">
            <span>100%好评</span>
            <span>半年售1000+</span>
          </div>
          <div class="tags">
            <div class="span">7.9</div>
            <div class="span">特价团</div>
          </div>
        </div>
      </div>
      <div class="item" v-for="(item, index) in 1" :key="index" @click="$router.push('/detail')">
        <img src="../assets/yqkr.jpg" alt/>
        <div class="box">
          <div class="title">日之屋原切烤肉</div>
          <div class="core">
            <span>91%好评</span>
            <span>半年售500+</span>
          </div>
          <div class="tags">
            <div class="span">128</div>
            <div class="span">特价团</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "外卖"
        },
        {
          name: "超市便利"
        },
        {
          name: "酒店名宿"
        },
        {
          name: "休闲玩乐"
        },
        {
          name: "看病买药"
        },
        {
          name: "美食"
        },
        {
          name: "蔬菜水果"
        },
        {
          name: "名宿公寓"
        },
        {
          name: "特团价"
        },
        {
          name: "电影演出"
        },
        {
          name: "美团优选"
        },
        {
          name: "火车票机票"
        },
        {
          name: "生活服务"
        },
        {
          name: "免费水果"
        },
        {
          name: "按摩足疗"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.home {
  background: #fdfffe;
}
.header {
  background: yellow;
  padding: 10px;
  .address {
    margin-bottom: 10px;
  }
  .search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 30px;
    flex: 1;
    padding: 2px 4px;
    input {
      flex: 1;
      height: 100%;
      padding: 0 6px;
      resize: none;
      outline: none;
      border: none;
      font-size: 14px;
    }
    span {
      padding: 6px 12px;
      border-radius: 30px;
      background: yellow;
      font-size: 14px;
    }
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-bottom: 10px;
  .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    span {
      font-size: 14px;
    }
    .item_image {
      width: 40px;
      height: 40px;
      background: #ccc cover;
      margin-bottom: 4px;
      background: url("../assets/item.jpg") no-repeat;
      background-size: 340px;
    }
    &:nth-child(2) {
      .item_image {
        background-position: -74px 0;
      }
    }
    &:nth-child(3) {
      .item_image {
        background-position: -152px 0;
      }
    }
    &:nth-child(4) {
      .item_image {
        background-position: -225px 0;
      }
    }
    &:nth-child(5) {
      .item_image {
        background-position: -302px 0;
      }
    }
    &:nth-child(6) {
      .item_image {
        background-position: -66px -66px;
      }
    }
    &:nth-child(7) {
      .item_image {
        background-position: -76px -66px;
      }
    }
    &:nth-child(8) {
      .item_image {
        background-position: -152px -66px;
      }
    }
    &:nth-child(9) {
      .item_image {
        background-position: -225px -66px;
      }
    }
    &:nth-child(10) {
      .item_image {
        background-position: -302px -66px;
      }
    }
    &:nth-child(11) {
      .item_image {
        background-position: 0 -132px;
      }
    }
    &:nth-child(12) {
      .item_image {
        background-position: -76px -132px;
      }
    }
    &:nth-chld(13) {
      .item_image {
        background-position: -152px -132px;
      }
    }
    &:nth-child(14) {
      .item_image {
        background-position: -225px -132px;
      }
    }
    &:nth-child(15) {
      .item_image {
        background-position: -302px -132px;
      }
    }
  }
}

.container {
  column-count: 2; /* 列数 */
  column-gap: 10px; /* 列间距 */
  padding: 10px 10px 0;
  background: #f5f5f5;
  .item {
    margin-bottom: 10px;
    /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
    break-inside: avoid;
    background: #fff;
    border-radius: 8px;
    padding-bottom: 6px;
    .box {
      padding: 0 6px;
    }
    .core {
      display: flex;
      align-items: center;
      margin: 2px 0 4px;
      span {
        margin-right: 4px;
        font-size: 10px;
        color: #ccc;
      }
    }
    .tags {
      display: flex;
      .span {
        border: 1px solid red;
        font-size: 10px;
        padding: 0px 2px;
        margin-right: 4px;
        border-radius: 4px;
      }
    }
  }
  .item img {
    width: 100%;
    border-radius: 20px 20px 0;
    min-height: 160px;
  }
}

.start_list {
  display: flex;
   column-count: 2; /* 列数 */
   column-gap: 10px; /* 列间距 */
  padding: 10px 10px 0;
  background: #f5f5f5;

  .item {
     margin-bottom: 10px;
    flex: 1;
    /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
    break-inside: avoid;
    background: #fff;
    border-radius: 8px;
    padding-bottom: 6px;
    &:first-child{
      margin-right: 5px;
    }
    &:last-child{
      margin-left: 5px;
    }
    .item_title {
      padding: 6px 0 0 6px;
      font-size: 14px;
    }
    .item_image{
      img{
        width: 100%;
        height: 150px;

      }
    }
    .item_line {
      display: flex;
      align-items: flex-end;
      padding-left: 6px;
      margin-top: 2px;
      span {
        &:first-child {
          color: red;
        }
        &:last-child {
          color: #ccc;
          font-size: 12px;
          margin-left: 4px;
        }
      }
    }
    .item_list {
      display: flex;
      // background: pink;
      flex-wrap: wrap;
      .item_list_item {
        display: flex;
        align-items: center;
        width: 50%;
        flex-direction: column;
        padding: 10px 0;
        p {
          span {
            &:first-child {
              color: red;
            }
            &:last-child {
              font-size: 10px;
              color: #ccc;
              margin-left: 4px;
            }
          }
        }
        .item_image_ {
          width: 60px;
          height: 60px;
          margin-bottom: 4px;
        }
      }
    }
    .subtitle {
      background: rgb(255, 115, 0);
      font-size: 12px;
      padding: 4px;
      border-radius: 4px;
      color: #fff;
    }
  }
}
</style>